{% extends "base.html" %}
    
{% block cssstyle %}
    <style>
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
            background-color: #fff;
            /*transition:width 2s;
            -webkit-transition:width 2s;*/
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
            border-radius: 6px;
            background-color: #fff;
        }

        ::-webkit-scrollbar-thumb {
            height: 60px;
            border-radius: 6px;
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
            background-color: #eee;
        }

        /*::-webkit-scrollbar:hover {
            width: 15px;
        }*/

        ::-webkit-scrollbar-thumb:hover {
            background-color: #ccc;
        }

    </style>
{% endblock %}


{% block content %}
    <!-- DATA TABLE-->
    <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!--h3 class="title-5 m-b-35"></h3-->
                    <div class="table-data__tool">
                        <div class="table-data__tool-left">
                            <div class="rs-select2--light rs-select2--md">
                                <select id="period-select" class="js-select2">
                                    <option {% if selected_period == 1 %} selected="selected" {% endif %} value="daily">日级筛选</option>
                                    <option {% if selected_period == 2 %} selected="selected" {% endif %} value="weekly">周级筛选</option>
                                </select>
                                <div class="dropDownSelect2"></div>
                            </div>
                            <div class="rs-select2--light rs-select2--md" id="daily-select">
                                <select id="daily-date-select" class="js-select2">
                                    {% for d in daily_date_list %}
                                        <option {% if selected_date == d %} selected="selected" {% endif %} value="{{ d }}">{{ d }}</option>
                                    {% endfor %}
                                </select>
                                <div class="dropDownSelect2"></div>
                            </div>
                            <div class="rs-select2--light rs-select2--md" id="weekly-select">
                                <select id="weekly-date-select" class="js-select2">
                                    {% for d in weekly_date_list %}
                                        <option {% if selected_date == d %} selected="selected" {% endif %} value="{{ d }}">{{ d }}</option>
                                    {% endfor %}
                                </select>
                                <div class="dropDownSelect2"></div>
                            </div>
                            <div class="rs-select2--light rs-select2--md">
                                <select id="trend-select" class="js-select2">
                                    <option {% if selected_trend == '' %} selected="selected" {% endif %} value="">全部趋势</option>
                                    <option {% if selected_trend == 'bg_a' %} selected="selected" {% endif %} value="bg_a">{% if selected_period == 1 %}D{% else %}W{% endif %}bg-A</option>
                                    <option {% if selected_trend == 'bg_b' %} selected="selected" {% endif %} value="bg_b">{% if selected_period == 1 %}D{% else %}W{% endif %}bg-B</option>
                                    <option {% if selected_trend == 'bg_c' %} selected="selected" {% endif %} value="bg_c">{% if selected_period == 1 %}D{% else %}W{% endif %}bg-C</option>
                                    <option {% if selected_trend == 'bg_d' %} selected="selected" {% endif %} value="bg_d">{% if selected_period == 1 %}D{% else %}W{% endif %}bg-D</option>
                                    <option {% if selected_trend == 'bg_e' %} selected="selected" {% endif %} value="bg_e">{% if selected_period == 1 %}D{% else %}W{% endif %}bg-E</option>
                                    <option {% if selected_trend == 'bg_f' %} selected="selected" {% endif %} value="bg_f">{% if selected_period == 1 %}D{% else %}W{% endif %}bg-F</option>
                                </select>
                                <div class="dropDownSelect2"></div>
                            </div>
                            <div class="rs-select2--light rs-select2--md">
                                <select id="industry-select" class="js-select2">
                                    <option {% if selected_industry == '' %} selected="selected" {% endif %} value="">全部行业</option>
                                    {% for d in industry_list %}
                                        <option {% if selected_industry == d %} selected="selected" {% endif %} value="{{ d }}">{{ d }}</option>
                                    {% endfor %}
                                </select>
                                <div class="dropDownSelect2"></div>
                            </div>
                            <button class="au-btn-filter" onclick="applyFilter();">
                                <i class="zmdi zmdi-filter-list"></i>筛选</button>
                        </div>
                        <div class="table-data__tool-right">
                            <button class="au-btn au-btn-icon au-btn--blue au-btn--small" data-table="#rsiFilterTable">导出</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <!-- TOP CAMPAIGN-->
                    <div class="statistic-chart-1" style="padding-right: 10px;">
                        <!--h3 class="title-3 m-b-30">{{ field }}</h3>
                        <hr-->
                        <div class="table-responsive table-data" style="height: 510px">
                            <table class="table table-top-campaign" id="rsiFilterTable">
                                <thead>
                                    <tr>
                                        <td>序号</td>
                                        <td>趋势</td>
                                        <td>行业</td>
                                        <td>代码</td>
                                        <td>名称</td>
                                        <td>对比点</td>
                                        <td class="sortable-field">对比点日期</td>
                                        <td style="color: #666">对比点RSI</td>
                                        <td style="color: #666">对比点CLOSE</td>
                                        <td style="color: #666">N点RSI</td>
                                        <td style="color: #666">N点CLOSE</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for row in rsi_trend %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td><a href='#' onclick="applyFilter('{{ row.key}}', null);">{{ row.trend }}</a></td>
                                            <td><a href='#' onclick="applyFilter(null, '{{ row.industry }}');">{{ row.industry }}</a></td>
                                            <td>{{ row.scode }}</td>
                                            <td>{{ row.sname }}</td>
                                            <td>{{ row.check_point }}</td>
                                            <td>{{ row.check_point_date }}</td>
                                            <td style="color: #C00">
                                                {{ row.check_point_rsi|stringformat:".2f" }}
                                            </td>
                                            <td style="color: #4272d7">
                                                {{ row.check_point_close|stringformat:".2f" }}
                                            </td>
                                            <td style="color: #C00">
                                                {{ row.n_rsi|stringformat:".2f" }}
                                            </td>
                                            <td style="color: #4272d7">
                                                {{ row.n_close|stringformat:".2f" }}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--  END TOP CAMPAIGN-->
                </div>
            </div>
        </div>
    </section>
    <!-- END DATA TABLE-->
{% endblock %}

{% block jsscript %}
    <script>
        function applyFilter(forceTrend = null, forceIndustry = null) {
            var periodSelect = $("#period-select").children('option:selected').val();
            var dateSelect = $("#" + periodSelect + "-date-select").children('option:selected').val();
            if (dateSelect == undefined) {
                dateSelect = '';
            }
            var trendSelect = $("#trend-select").children('option:selected').val();
            var industrySelect = $("#industry-select").children('option:selected').val();

            if (forceTrend != null) {trendSelect = forceTrend}
            if (forceIndustry != null) {industrySelect = forceIndustry}

            window.location = "/rsif/?date=" + dateSelect + '&period=' + periodSelect + '&trend=' + trendSelect + '&industry=' + industrySelect;
        }
        function changePeriod() {
            var period = $("#period-select").children('option:selected').val();
            if (period == 'daily') {
                $("#weekly-select").css('display', 'none');
                $("#daily-select").css('display', '');
            } else {
                $("#daily-select").css('display', 'none');
                $("#weekly-select").css('display', '');
            }
        }
        changePeriod();
        $("#period-select").change(changePeriod);

        $("[data-toggle='popover']").popover();
    </script>
{% endblock %}
